{% extends 'base.html' %}

{% block title %}删除球台 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}删除球台{% endblock %}

{% block extra_css %}
<style>
    .delete-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        max-width: 600px;
        margin: 0 auto;
    }

    .warning-icon {
        font-size: 4rem;
        color: #dc3545;
        margin-bottom: 1rem;
    }

    .table-info-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 1.5rem;
        margin: 1.5rem 0;
        border-left: 4px solid #dc3545;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }

    .info-item:last-child {
        margin-bottom: 0;
    }

    .info-label {
        font-weight: 500;
        color: #6c757d;
    }

    .info-value {
        font-weight: 600;
        color: #2c3e50;
    }

    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-available {
        background: #d4edda;
        color: #155724;
    }

    .status-maintenance {
        background: #fff3cd;
        color: #856404;
    }

    .status-disabled {
        background: #f8d7da;
        color: #721c24;
    }

    .confirm-section {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 10px;
        padding: 1.5rem;
        margin: 1.5rem 0;
    }

    .confirm-text {
        color: #856404;
        font-weight: 500;
        margin-bottom: 1rem;
    }

    .danger-actions {
        border-top: 1px solid #dee2e6;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .btn-danger-confirm {
        background: #dc3545;
        border: 1px solid #dc3545;
        color: white;
        padding: 0.75rem 2rem;
        font-weight: 600;
    }

    .btn-danger-confirm:hover {
        background: #c82333;
        border-color: #bd2130;
        color: white;
    }

    .btn-secondary-cancel {
        background: #6c757d;
        border: 1px solid #6c757d;
        color: white;
        padding: 0.75rem 2rem;
        font-weight: 600;
    }

    .btn-secondary-cancel:hover {
        background: #545b62;
        border-color: #4e555b;
        color: white;
    }

    @media (max-width: 768px) {
        .danger-actions {
            flex-direction: column;
        }

        .danger-actions .btn {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="delete-card">
        <div class="text-center">
            <i class="fas fa-exclamation-triangle warning-icon"></i>
            <h4 class="text-danger mb-3">确认删除球台</h4>
            <p class="text-muted">
                您即将删除球台，此操作<strong>不可撤销</strong>。
                请仔细检查球台信息并确认删除。
            </p>
        </div>

        <!-- 球台信息 -->
        <div class="table-info-card">
            <h6 class="text-danger mb-3">
                <i class="fas fa-table-tennis me-2"></i>球台信息
            </h6>

            <div class="info-item">
                <span class="info-label">球台名称：</span>
                <span class="info-value">{{ table.name }}</span>
            </div>

            <div class="info-item">
                <span class="info-label">所属校区：</span>
                <span class="info-value">{{ table.campus.name if table.campus else '未分配校区' }}</span>
            </div>

            <div class="info-item">
                <span class="info-label">当前状态：</span>
                <span class="status-badge status-{{ table.status }}">
                    {% if table.status == 'available' %}可用
                    {% elif table.status == 'maintenance' %}维护中
                    {% elif table.status == 'disabled' %}禁用
                    {% endif %}
                </span>
            </div>

            <div class="info-item">
                <span class="info-label">创建时间：</span>
                <span class="info-value">{{ table.created_at.strftime('%Y-%m-%d %H:%M') if table.created_at else '未知' }}</span>
            </div>
        </div>

        <!-- 删除确认表单 -->
        <form method="POST">
            {{ form.hidden_tag() }}
            {{ form.table_id() }}

            <div class="confirm-section">
                <div class="confirm-text">
                    <i class="fas fa-shield-alt me-2"></i>
                    为了确保您真的要删除这个球台，请在下方输入 <strong>"删除"</strong> 来确认操作：
                </div>

                <div class="mb-3">
                    {{ form.confirm_text.label(class="form-label text-danger") }}
                    {{ form.confirm_text(class="form-control") }}
                    {% if form.confirm_text.errors %}
                        <div class="text-danger small mt-1">
                            {% for error in form.confirm_text.errors %}
                                <div>{{ error }}</div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="danger-actions">
                <a href="{{ url_for('tables.detail', id=table.id) }}"
                   class="btn btn-secondary-cancel">
                    <i class="fas fa-times me-2"></i>取消
                </a>
                <button type="submit" class="btn btn-danger-confirm" id="deleteBtn" disabled>
                    <i class="fas fa-trash me-2"></i>确认删除
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmInput = document.querySelector('input[name="confirm_text"]');
    const deleteBtn = document.getElementById('deleteBtn');

    // 监听确认输入
    confirmInput.addEventListener('input', function() {
        if (this.value.trim() === '删除') {
            deleteBtn.disabled = false;
            deleteBtn.classList.remove('btn-secondary');
            deleteBtn.classList.add('btn-danger-confirm');
        } else {
            deleteBtn.disabled = true;
            deleteBtn.classList.remove('btn-danger-confirm');
            deleteBtn.classList.add('btn-secondary');
        }
    });

    // 表单提交前再次确认
    document.querySelector('form').addEventListener('submit', function(e) {
        if (confirmInput.value.trim() !== '删除') {
            e.preventDefault();
            alert('请正确输入"删除"以确认操作');
            return false;
        }

        if (!confirm('您确定要删除这个球台吗？此操作不可撤销！')) {
            e.preventDefault();
            return false;
        }
    });
});
</script>
{% endblock %}